<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.6/css/layui.css">
    <script src="/webjars/layui/2.5.6/layui.js" type="text/javascript"></script>
</head>
<body>

<script id="userTool" type="text/html">
    <button class="layui-btn" onclick="userAdd()">添加</button>
    <button class="layui-btn" onclick="batchDel()">批量删除</button>
</script>
<script id="userDCL" type="text/html">
    <button class="layui-btn" lay-event="userUpdate">修改</button>
</script>

<div>

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">客户条件</h2>
            <div class="layui-colla-content layui-show">
                <form class="layui-form layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="customName" id="customName" required  lay-verify="required" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item layui-input-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="status" id="status" lay-verify="required">
                                <option value="">全部</option>
                                <option value="1">有效客户</option>
                                <option value="2">无效客户</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="layui-btn" onclick="searchByUserName()">查询</button>
                </form>
            </div>
        </div>

    </div>

    <table id="userTable" lay-filter="userTable" class="layui-table"></table>
</div>

<div id="userHandler" style="display: none">
    <form class="layui-form" id="userForm" lay-filter="userForm" style="padding: 35px;">
        <div class="layui-form-item">
            <label class="layui-form-label">客户编号</label>
            <div class="layui-input-inline">
                <input type="text" name="customId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="customName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-inline">
                <input type="text" name="fullName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系号码</label>
            <div class="layui-input-inline">
                <input type="text" name="fax" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="email" name="email" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">董事长</label>
            <div class="layui-input-inline">
                <input type="text" name="ownerName" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="ownerTel" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">客户需求</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="note" required  lay-verify="required"  autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">客户需求</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="note" lay-verify="content" id="note"></textarea>
            </div>
        </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" id="userRole" lay-verify="required">
                            <option value="1">有效客户</option>
                            <option value="2">无效客户</option>
                        </select>
                    </div>
                </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">性别</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="radio" name="gender" value="1" title="男" checked>-->
<!--                <input type="radio" name="gender" value="0" title="女">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">日期</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input id="creationDate" lat-filter="creationDate"  name="creationDate" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">角色</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="userRole" id="userRole" lay-verify="required">-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->

    </form>
</div>
</body>
<script>
    function userAdd() {
        userDCL("addCustom");
    }
    function userUpdate(data) {
        userDCL("updateCustom",data);
        // console.log(data);
    }

    function userDCL(path,data) {
        layui.use(['table', 'form', 'jquery', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;
            var msg="修改"
            if(path=="addCustom"){
                $("#userForm")[0].reset();
                msg="添加";
            }else {
                form.val("userForm",data);
            }
            layer.open({
                type: 1,
                title: msg,
                area: ["500px","450px"],
                content: $("#userHandler"),
                btn: ['确定', '取消'],
                yes() {
                    let user = form.val("userForm");
                    console.log(user)
                    $.post(path,user).done(({msg})=>{
                        layer.close(layer.index)
                        layer.msg(msg);
                        form.render('select');
                        table.reload("userTable")
                    })
                    // $.ajax({
                    //     url: path,
                    //     type: "post",
                    //     dataType: "json",
                    //     data: JSON.stringify(user),
                    //     contentType: "application/json",
                    //     success: ({msg}) => {
                    //         layer.close(layer.index)
                    //         layer.msg(msg);
                    //         form.render('select');
                    //         table.reload("userTable")
                    //
                    //     }
                    // })
                }
            })
        })
    }
    function searchByUserName(){
        var $=layui.jquery;
        var status=$("#status").val();
        var customName=$("#customName").val();
        layui.table.reload('userTable',{where:{status:status,customName:customName}})
    }
    layui.use(['table','form','laydate','jquery','element'],function () {
        let table=layui.table;
        let form=layui.form;
        let $=layui.jquery;
        let laydate=layui.laydate;
        table.render({
            id:"userTable",
            elem:"#userTable",
            url:"/custom/list",
            toolbar:"#userTool",
            cols:[
                [
                    {type:"checkbox"},
                    {title:"客户编号",field:"customId"},
                    {title:"客户名称",field:"customName"},
                    {title:"公司名称",field:"fullName"},
                    {title:"公司地址",field:"address"},
                    {title:"练习方式",field:"fax"},
                    {title:"邮箱",field:"email"},
                    {title:"董事长",field:"ownerName"},
                    {title:"老板电话",field:"ownerTel"},
                    {title:"状态",templet(d){return d.status=="1"?"有效客户":"无效客户";}},
                    // {title:"客户介绍",field:"note"},
                    // {title:"性别",templet(d){return d.gender=="1"?"男":"女";}},
                    // {title:"角色编号",templet(d) {
                    //         return d.role==null?"无":d.role.roleName;
                    //     }},
                    // {title:"创办日期",field:"creationDate"},
                    {title:"操作",toolbar: "#userDCL"}
                ]
            ],
            page:{
                limit:6,
                limits:[9,12,15]
            }
        });
        table.on("tool(userTable)",function ({data,event}) {
            switch (event) {
                case "userUpdate":
                    userUpdate(data);
            }
        })
        // laydate.render({
        //     elem: '#creationDate'
        //     ,format: 'yyyy-MM-dd HH:mm' //可任意组合
        // });
        // $.get("/admin/role/roles",({data})=>{
        //     for (let d of data) {
        //         console.log(d)
        //         var option=$("<option/>");
        //         option.html(d.roleName);
        //         option.val(d.id);
        //         $("#userRole").append(option);
        //     }
        //     form.render('select');
        // })

    })
    //批量删除
    function batchDel() {
        layui.use(['table','layer','jquery'],function () {
            var table=layui.table;
            var layer=layui.layer;
            var $=layui.jquery;
            var custom=table.checkStatus("userTable").data;
            var ids=custom.map(custom=>"customId="+custom.customId).join("&")
            if(ids==""){
                layer.msg("请选择要的角色客户")
                return;
            }
            console.log(custom)
            console.log(ids)
            $.get("/custom/patchDel?"+ids,({msg})=>{
                layer.msg(msg)
                table.reload("userTable");
            })

        })
    }
</script>
</body>
</html>